<template>
  <div style="height:100%;">
    <!--表5蔬菜生产经营实体表T_VegProsecution-->
    <Row>
      <Col span="24" class="col-margin">
      <!--根据需求删除不不要查询条件-->
      填报年度：
      <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 100px" @on-change="getPageData()">
        <Option value="">全部</Option>
        <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
      </Select>
      时间周期：
      <Select v-model="searchModel.TimesType" placeholder="全部" style="width: 100px" @on-change="getPageData()">
        <Option value="">全部</Option>
        <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
      </Select>
      <Button icon="ios-search" type="ghost" @click="getPageData()">查询</Button>
      <Button icon="ios-cloud-download" type="primary" @click="TmpDown()" class="searchButton">模板下载</Button>
      </Col>
    </Row>
    <Row>
      <Col span="24" class="col-margin">
      <Table size="small" @on-select="selectSingel" @on-select-all="selectAll" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
      </Col>
    </Row>
    <Row>
      <Col span="24">
      <Page class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
      </Col>
    </Row>
    <Modal v-model="showType" :mask-closable="false" width="800">
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">外销情况调查表</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size=25></Icon>
      </p>
      <table class="reptable" style="width:100%">
          <tr>
            <th>项目指标</th>
            <th>数量</th>
          </tr>
          <tr>
            <td>水果全年生产总量（吨）</td>
            <td><Input v-model="dataModel.ProductNumber"></Input></td>
          </tr>
          <tr>
            <td>其中：外销量（吨）</td>
            <td><Input v-model="dataModel.SaleNumber"></Input></td>
          </tr>
          <tr>
            <td>水果全年生产总额（万元）</td>
            <td><Input v-model="dataModel.ProductMoney"></Input></td>
          </tr>
          <tr>
            <td>其中：外销额（万元）</td>
            <td><Input v-model="dataModel.SaleMoney"></Input></td>
          </tr>
      </table>
      <div style="text-align:right;padding-top:10px">
            <Button type="primary" @click="save()">保存</Button>
            <Button type="ghost" @click="cancel()" style="margin-left: 5px">取消</Button>
      </div>
      <div slot="footer">
        <Alert style="margin-top:5px;text-align:left" banner type="error">
          填报说明: 1.全省范围内从乡（镇）推广站起，逐级全面统计，由州（市）汇总后上报。
          <span slot="desc">
          </span>
        </Alert>
      </div>
    </Modal>
    <Modal v-model="ViewShow" :mask-closable="false" width="800">
      <p slot="header" class="title">
        <Icon type="ios-paper" size="20"></Icon>
        <span style="font-size: 20px">外销情况调查表</span>
      </p>
      <p slot="close">
        <Icon type="close-circled" color="red" size=25></Icon>
      </p>
        <table class="reptable" style="width:100%">
          <tr>
            <th>项目指标</th>
            <th>数量</th>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">水果全年生产总量（吨）</td>
            <td style="text-align:right;">{{dataModel.ProductNumber}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">其中：外销量（吨）</td>
            <td style="text-align:right;">{{dataModel.SaleNumber}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">水果全年生产总额（万元）</td>
            <td style="text-align:right;">{{dataModel.ProductMoney}}</td>
          </tr>
          <tr style="height:40px;">
            <td style="text-align:center;">其中：外销额（万元）</td>
            <td style="text-align:right;">{{dataModel.SaleMoney}}</td>
          </tr>
      </table>
      <br/>
      <div slot="footer">
        <Alert style="margin-top:5px;text-align:left" banner type="error">
          填报说明: 1.全省范围内从乡（镇）推广站起，逐级全面统计，由州（市）汇总后上报。
          <span slot="desc">
          </span>
        </Alert>
      </div>
    </Modal>
  </div>
</template>
<script>
//import { getList } from 'api/Report';
import axios from '../../config'//默认http请求配置
export default {
  data() {
    return {
      ViewShow: false,//查看状态
      TableCodeList: this.GetGroupDict("ReportTableName"),//表名称
      CreateYearList: this.GetGroupDict("ReportYear"),//周期
      CycleList: this.GetGroupDict("ReportCycle"),//
      TabTitleList: [],//tab选项卡列表
      selectTabName: '',
      showType: false,//编辑框弹出状态
      ruleValidate: {//验证模型
        TableName: [{ required: true, message: '报表名称不能为空', trigger: 'blur' }],
        TableCode: [{ required: true, message: '报表代码不能为空', trigger: 'blur' }],
        CreateYear: [{ required: true, message: '年度不能为空', trigger: 'blur' }],
        Cycle: [{ required: true, message: '时间周期不能为空', trigger: 'blur' }],
        CreateTime: [{ required: true, message: '生成时间不能为空', trigger: 'blur' }],
      },
      dataModel: {//编辑模型
        Id: 0,
        ReportId: '',
        ProductNumber: '',
        SaleNumber: '',
        ProductMoney: '',
        SaleMoney: ''
      },
      //查询模型：根据需求删除不不要查询条件
      searchModel: {
        ReportCode: 'FruExport',
        FillInYear: '',
        TimesType: '',
        AreaCode: '',
        PageNumber: 1, PageSize: 20
      },
      pageSizeOpts: [20, 40, 50],//默认分页最大设置
      datas: {},//table数据对象
      dataIds: [],
      ctx: this,//table数据上下文
      columnsList: [//表头对象
        // { type: 'selection', width: 60, align: 'center' },//多选设置
        { title: "报表名称", key: "ReportName", width: 300 },
        { title: "填报年度", key: "FillInYear", width: 90 },
        { title: "属行政区划", key: "AreaCodeName", width: 220 },
        { title: "填报周期", key: "TimesCycle", width: 90 },
        {
          title: "报表状态", key: "StatusName", width: 100,
          render: (h, params) => {
            switch (params.row.Status * 1) {
              case 0:
                return h('span', { style: { color: '#ed3f14' } }, params.row.StatusName);
              case 1:
                return h('span', { style: { color: '#ff9900' } }, params.row.StatusName);
              case 2:
                return h('span', { style: { color: '#993300' } }, params.row.StatusName);
              case 3:
                return h('span', { style: { color: '#2d8cf0' } }, params.row.StatusName);
              case 4:
                return h('span', { style: { color: '#19be6b' } }, params.row.StatusName);
              case 5:
                return h('span', { style: { color: '#80848f' } }, params.row.StatusName);
              default:
                return h('span', { style: { color: '#ff9900' } }, params.row.StatusName);
            }
          }
        },
        // { title: "未通过原因", key: "Opinion" },
        { title: "填报时间", key: "StrUpdateTime", width: 160 },
        {
          title: "操作", key: "Id", width: 220, align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                class: {
                  ieditColor: true
                },
                props: {
                  size: 'small',
                  type: 'ghost',
                  icon: 'ios-paper-outline'
                }, style: {
                  marginRight: '5px'
                }, on: {
                  click: () => {
                    this.showInfo(params.row.Id, params.row.ReportCode)
                  }
                }
              }, '查看'),
              h('Button', {
                class: {
                  ieditColor: true
                },
                props: {
                  size: 'small',
                  type: 'ghost',
                  icon: 'ios-compose'
                },
                style: {
                  marginRight: '5px'
                },
                attrs: {
                  disabled: params.row.Status > 2 ? true : false
                },
                on: {
                  click: () => {
                    this.editInfo(params.row.Id, params.row.ReportCode)
                  }
                }
              }, '填报'),
              h('Button', {
                class: {
                  ieditColor: true
                },
                props: {
                  size: 'small',
                  type: 'ghost',
                  icon: 'ios-trash-outline'
                },
                style: {
                  marginRight: '5px'
                },
                attrs: {
                  disabled: params.row.Status != 2 ? true : false
                },
                on: {
                  click: () => {
                    this.upReport(params.row.Id)
                  }
                }
              }, '上报'),
            ]);
          }
        }],
      clientHeight: window.innerHeight - 220,//表格默认高度
    }
  },
  mounted() {
    //table高度计算方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientHeight = window.innerHeight - 220;
      })()
    };
  },
  methods: {
    //模板下载
    TmpDown: function () {
      window.open(this.$http.defaults.baseURL+"Report/GetExportData?ReportCode=" +this.searchModel.ReportCode);
    },
    //上报
    upReport(id) {
      var self = this;
      self.$Modal.confirm({
        title: '提示信息',
        content: '<p>是否确认上报？</p>',
        onOk: () => {
          var model = new Object();
          model.Id = id;
          model.reportType = '3';
          model.strMsg = '';
          this.$http.post("Report/PostUpStatus", model).then(
            function (res) {
              if (res.data.status == 1) {
                self.$Notice.success({ title: '已上报！', desc: false });
                self.getPageData();
              }
              else {
                self.$Modal.error({ title: "提示信息", content: "上报失败!!!" });
              }
            }
          );
        }
      });
    },
    getTab(name) {
      //console.log(name);
      this.selectTabName = name;
    },
    //查看报表
    showInfo(id, reportCode) {
      var self = this;
      this.$http.get("Report", { params: { id: id, reportCode: reportCode } }).then(//获取数据编辑项的值
        function (res) {
          switch (res.data.list.status) {
            case 1:
              self.dataModel = res.data.list.model;
              //self.initTab(self, res.data.list.model);
              self.ViewShow = true;
              break;
            case 0:
              self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
              break;
            case -1:
              self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
              break;
          }
        }
      );
    },
    //获取当前页码
    getPageNumber(pageIndex) {
      this.searchModel.PageNumber = pageIndex;
      this.getPageData();
    },
    //获取当前分页大小
    getPageSize(pageSize) {
      this.searchModel.PageSize = pageSize;
      this.getPageData();
    },
    //获取this.datas: {},//table数据对象
    getPageData() {
      var self = this;
      var user = this.GetlocaStorage("fruuserinfo");
      this.searchModel.AreaCode = user.AreaCode;
      self.$http.post('Report/PostPageList', this.searchModel).then(function (res) {
        if (res.data.status === 1) {
          self.datas = res.data;
        }
        else {
          self.$Modal.error({ title: '提示信息', content: res.data.message });
        }
      });
    },
    //编辑获取对象传入id
    editInfo(id, reportCode) {//编辑
      var self = this;
      this.$http.get("Report", { params: { id: id, reportCode: reportCode } }).then(//获取数据编辑项的值
        function (res) {
          switch (res.data.list.status) {
            case 1:
              self.dataModel = res.data.list.model;
              self.modalShow();
              break;
            case 0:
              self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
              break;
            case -1:
              self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
              break;
          }
        }
      );
    },
    initTab(self, datas) {
      self.TabTitleList = [];
      for (var i = 0; i < datas.length; i++) {
        if (!self.checkTab(datas[i].SortCode, self)) {
          var item = new Object();
          item.SortCode = datas[i].SortCode;
          item.SortName = datas[i].SortName;
          item.list = [];
          for (var j = 0; j < datas.length; j++) {
            if (datas[j].SortCode == datas[i].SortCode) {
              if (!self.checkItem(item.list, datas[j].ItemCode)) {
                item.list.push(datas[j]);
              }
            }
          }
          self.TabTitleList.push(item);
        }
      }
      return self.TabTitleList;
    },
    checkTab(SortCode, self) {
      var res = false;
      for (var i = 0; i < self.TabTitleList.length; i++) {
        if (self.TabTitleList[i].SortCode == SortCode) {
          res = true;
        }
      }
      return res;
    },
    checkItem(datas, ItemCode) {
      var res = false;
      for (var i = 0; i < datas.length; i++) {
        if (datas[i].ItemCode == ItemCode) {
          res = true;
        }
      }
      return res;
    },
    //删除对象
    delInfo(id) {
      var self = this;
      self.$Modal.confirm({
        title: '提示信息',
        content: '<p>数据删除后不可恢复，确定要删除？</p>',
        onOk: () => {
          this.$http.delete("GenerateLog", { params: { id: id } }).then(
            function (res) {
              if (res.data.status == 1) {
                self.$Notice.success({ title: '删除成功！', desc: false });
                self.getPageData();
              }
              else {
                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
              }
            }
          );
        }
      });
    },
    //保存方法
    save() {
      var self = this;
      if (self.dataModel.SaleNumber > self.dataModel.ProductNumber) {
        self.$Modal.warning({ title: "提示信息", content: "外销量不应大于水果全年生产总量!" });
      } else if (self.dataModel.SaleMoney > self.dataModel.ProductMoney) {
        self.$Modal.warning({ title: "提示信息", content: "外销额不应大于水果全年生产总额!" });
      } else {
        this.$http.put('FruExport', self.dataModel).then(
          function (res) {
            if (res.data.status == 1) {
              self.getPageData();//读取分页数据
              //self.modalHide();//关闭modal
              self.$Notice.success({ title: '保存成功！', desc: false });
            }
            else {
              self.$Modal.warning({ title: "提示信息", content: "更新失败,请与管理员联系!" });
            }
          });
      }
    },
    findItemList(tabname) {
      var list = [];
      for (var i = 0; i < this.TabTitleList.length; i++) {
        if (this.TabTitleList[i].SortCode == tabname) {
          list = this.TabTitleList[i].list;
          break;
        }
      }
      return list;
    },
    //编辑框打开
    modalShow() {
      this.showType = true;
    },
    //编辑框关闭
    modalHide() {
      this.showType = false;
    },
    //取消方法
    cancel() {
      this.showType = false;//关闭modal
      this.TabTitleList = [];
    },
    //重置model
    restModel(modelname) {
      this.$refs[modelname].resetFields();//重置model
    },
    //全选方法
    selectAll(selection) {
      this.dataIds = selection;
    },
    //checkbox选中方法
    selectSingel(selection, row) {
      this.dataIds = selection;
    },
    //checkbox取消选中方法
    selecChange(selection) {
      this.dataIds = selection;
    },
    //批量删除
    multiSelect() {
      var self = this;
      if (this.dataIds.length !== 0) {
        self.$Modal.confirm({
          title: '提示信息',
          content: '<p>数据删除后不可恢复，确定要删除？</p>',
          onOk: () => {
            var ids = this.getDataIds(this.dataIds);
            this.$http.post("GenerateLog/PostBatchDelete", ids).then(
              function (res) {
                if (res.data.status == 1) {
                  self.dataIds = [];
                  self.$Notice.success({ title: '删除成功！', desc: false });
                  self.getPageData();
                }
                else {
                  self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                }
              }
            );
          }
        });
      } else {
        self.$Modal.warning({ title: "提示信息", content: "请选择需要删除的数据!" });
      }

    },
    getDataIds(idList) {
      var ids = [];
      if (idList.length !== 0) {
        for (var i = 0; i < idList.length; i++) {
          ids.push(idList[i].Id);
        }
      }
      return ids;
    }
  },
  //创建Vue页面方法
  created: function () {
    //创业Vue前调用获取this.datas: {},//table数据对象
    this.getPageData();
  },
  watch: {
    //需要监听的在此处新增监听对象
  }
}
</script>
